<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets/apply-list' }">申请管理</el-breadcrumb-item>
                <el-breadcrumb-item>票券分配管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query">
                <el-form-item label="票券编号">
                    <el-input v-model="query.ticket_no"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
            <div class="main-actions-btns">
                <el-button @click="manageTickets = editDialogVisible = true">刷票票券分配</el-button>
                <el-button @click="manageTickets2 = editDialogVisible2 = true">起始编号分配</el-button>
                <el-button @click="manageTickets3 = editDialogVisible3 = true">刷票撤销分配</el-button>
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column width="150" prop="ticket_no" label="票券分配编号"></el-table-column>
            <el-table-column width="80" prop="price" label="价格"></el-table-column>
            <!-- <el-table-column width="100" prop="private_price" label="协议价"></el-table-column> -->
            <!-- <el-table-column width="100"  label="票券分配大类" inline-template>
                <div>
                    <span>{{ row.grandpa ? row.grandpa.name : '-' }}</span>
                </div>
            </el-table-column> -->
            <el-table-column width="200" label="票券分配类型" inline-template>
                <div>
                    <span>{{ row.parent ? row.parent.name : '-'}}-{{row.types.name}}-{{row.type}}</span>
                </div>
            </el-table-column>
            <el-table-column label="有效开始时间" width="150" inline-template>
                <div>
                    <span>{{ row.start_time | date }}</span>
                </div>
            </el-table-column>
            <el-table-column label="到期时间" width="150" inline-template>
                <div>
                    <span>{{ row.end_time | date }}</span>
                </div>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100" inline-template>
                <el-tag :type="statusAlias[row.status].icon">{{statusAlias[row.status].name}}</el-tag>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" type="danger" v-if="user.role.name.indexOf('超级管理员') > -1" @click="deleteItem(row)">撤销分配</el-button>
                    <!-- <el-button size="small" type="success" v-if="row.grand_id === 0" @click="editItem(row, 2)">新增子票券分配</el-button> -->
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>

         <el-dialog
            title="票券分配"
            :visible.sync="editDialogVisible"
            size="tiny"
        >
            <el-form :model="editData" @submit.native.prevent="submit">
                <el-form-item label="票券编号">
                    <el-input autofocus v-model="editData.ticket_no"  placeholder="输入票券编号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="起始标号分配"
            :visible.sync="editDialogVisible2"
            size="tiny"
        >
            <el-form :model="editData" @submit.native.prevent="submit">
                <el-form-item label="开始票券编号">
                    <el-input v-model="editData.start_ticket_no" autofocus placeholder="输入票券编号"></el-input>
                </el-form-item>
                <el-form-item label="终止票券编号">
                    <el-input v-model="editData.end_ticket_no" placeholder="输入票券编号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="刷票撤销分配"
            :visible.sync="editDialogVisible3"
            size="tiny"
        >
            <el-form :model="editData" @submit.native.prevent="deleteItem">
                <el-form-item label="票券编号">
                    <el-input v-model="editData.ticket_no" autofocus placeholder="输入票券编号"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="deleteItem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ListController from '../controllers/list';

import TicketModel from '../models/ticket';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';
import Promise from 'bluebird';
import TTXS from '../common/ttxs';
import Apply from '../models/apply';
import apply from '../models/apply';

export default new ListController({
    data() {
        return {
            ListModel: TicketModel,
            user: TTXS.user,
            query: {
                page_num: 1,
                page_size: 20,
                ticket_no: '',
                apply_id: 0,
            },
            autofocus: true,
            statusMap: {
                PENDING: TicketModel.PENDING,
                USED: TicketModel.USED,
                OFFLINE: TicketModel.OFFLINE,
                UNUSED: TicketModel.UNUSED,
                COMPLETED: TicketModel.COMPLETED
            },
            statusAlias: {
                [TicketModel.PENDING]: {
                    icon: 'warning',
                    name: '待审核'
                },
                [TicketModel.UNUSED]: {
                    icon: 'success',
                    name: '未使用'
                },
                [TicketModel.OFFLINE]: {
                    icon: 'gray',
                    name: '未出票'
                },
                [TicketModel.READY]: {
                    icon: 'gray',
                    name: '备售'
                },
                [TicketModel.USED]: {
                    icon: 'success',
                    name: '已使用'
                },
                [TicketModel.COMPLETED]: {
                    icon: 'success',
                    name: '已核销'
                }
            },
            apply: {},
            editData: {
                ticket_no: '',
                start_ticket_no: '',
                end_ticket_no: ''
            },
            editDialogVisible: false,
            editDialogVisible2: false,
            editDialogVisible3: false
        };
    },
    methods: {
        beforeLoadItems() {
            this.query.apply_id = this.$route.params.apply_id;
            return Apply.get({
                id: this.query.apply_id
            })
            .$promise
            .then(apply => {
                this.apply = apply;
            })
        },
        afterLoadItems() {
            const num = this.apply.num - this.itemsData.pagination.total;
            if(num === 0) {
                this.$message.info('该申请已分配满');
            }
            else {
                this.$message.info('该申请还差 ' + num + ' 张待分配');
            }
        },
        debugItem(row) {
            this.$confirm('确认调试该项？')
            .then(() => {
                this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise;
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        pullItem(row) {
            this.$confirm('确认下线该项？')
            .then(() => {
                const params = Object.assign({}, row, {
                    id: row.id,
                    status: 0
                });
                this.ListModel.update(params).$promise;
            })
            .then(() => {
                this.$message({
                    message: '下线成功！',
                    type: 'success'
                });

                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
        pushItem(row) {
            this.$confirm('确认上线该项？')
            .then(() => {
                return this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise
                .then(() => {
                    this.loadItems();
                });
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        pullItems() {
            return this.setItems(this.selectedItems, {
                deleted: 1
            }, {
                confirm: '确认删除选中项？'
            });
        },
        deleteItem(row) {
            this.$confirm('确认撤销该票券分配？')
            .then(() => {
                if(this.editData.ticket_no) {
                    return this.ListModel.update({
                        id: row.id || 0,
                        ticket_no: this.editData.ticket_no,
                        apply_id: 0,
                        start_time: this.apply.start_time,
                        end_time: this.apply.end_time,
                        status: TicketModel.OFFLINE,
                    }).$promise;
                }
                else {
                    return this.ListModel.update({
                        id: row.id,
                        apply_id: 0,
                        status: TicketModel.OFFLINE,
                    }).$promise;
                }
            })
            .then(() => {
                this.editData.ticket_no = '';
                return this.loadItems();
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        submit() {
            if(this.itemsData.pagination.total === this.apply.num) {
                this.$message.info('该申请已分配满票券');
                return;
            }
            if(this.editDialogVisible2 && !this.editData.start_ticket_no) {
                this.$message.info('请输入起始编号');
                return;
            }
            if(this.editDialogVisible2 && !this.editData.end_ticket_no) {
                this.$message.info('请输入终止编号');
                return;
            }

            let status = TicketModel.UNUSED;
            if(this.apply.type === '备售') {
                status = TicketModel.READY;
            }

            return this.ListModel.update({
                id: 0,
                status: status,
                ticket_no: this.editData.ticket_no,
                apply_id: this.query.apply_id,
                type_id: this.apply.type_id,
                parent_id: this.apply.parent_id,
                end_time: this.apply.end_time,
                price: this.apply.price,
                end_ticket_no: this.editData.end_ticket_no,
                start_time: this.apply.start_time,
                b_percent: this.apply.b_percent,
                start_ticket_no: this.editData.start_ticket_no,
            }).$promise
            .then(() => {
                this.editData.ticket_no = '';
                this.editData.start_ticket_no = '';
                this.editData.end_ticket_no = '';
                this.loadItems()
            })
            .catch(err => {
                this.editData.ticket_no = '';
                this.$message.error(err);
            });
        }
    },
    watch: {
        'editDialogVisible': function(val) {
            if(!val) {
                this.loadItems();
            }
        }
    }
});
</script>
